<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">

        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="#">我的博客</a>

        <!-- 导航入口 -->
        <div>
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_create' %}">写文章</a>
                </li>
                {% if user.is_authenticated %}
                    <!-- 如果用户已经登录，则显示用户名下拉框 -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item">个人信息</a>
                                ...
                            </div>
                            <!-- 新增 -->
                            <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>

                            <a class="dropdown-item" href='{% url "userprofile:logout" %}'>退出登录</a>
                        </div>

                    </li>
                {% else %}
                    <!-- 如果用户未登录，则显示 “登录” -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a>
                    </li>
                {% endif %}
                <!-- 新增 -->
                {% if user.is_authenticated %}
                    <form
                            style="display:none;"
                            id="user_delete"
                            action="{% url 'userprofile:delete' user.id %}"
                            method="POST"
                    >
                        {% csrf_token %}
                        <button type="submit">发送</button>
                    </form>
                    <script>
                        function user_delete() {
                            // 调用layer弹窗组件
                            layer.open({
                                title: "确认删除",
                                content: "确认删除用户资料吗？",
                                yes: function (index, layero) {
                                    $('form#user_delete button').click();
                                    layer.close(index);
                                },
                            })
                        }
                    </script>
                {% endif %}
            </ul>
        </div>

    </div>
</nav>
</body>
</html>